<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 一、组件无法直接访问Vue实例对象中的数据 -->
    <!-- 二、每个组件都应该有自己保存数据的地方 -->
    <div id="app">
        <!-- 3.使用子组件 -->
        <!-- <child-cpn></child-cpn> -->

        <!-- 使用全局组件 -->
        <max-cpn></max-cpn>

    </div>

    <div id="app2">
        <!-- 使用全局组件 -->
        <max-cpn></max-cpn>
    </div>
    <script src="./vue.js"></script>
    <!-- 1.创建子组件模板 -->
    <template id="child">
        <div>
            <h3>{{message}}</h3>
        </div>

    </template>

    <!-- 创建全局组件模版 -->
    <template id="max">
        <div>
            <h3>666666666</h3>
        </div>
    </template>
    <script>
        // 注册全局组件
        Vue.component("max-cpn", {
            template: "#max"
        })


        let app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
            // 2.注册子组件
            components: {
                "child-cpn": {
                    template: "#child"
                }
            }
        })

        let app2 = new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>